<template>
  <div p-20rpx>
    <div class="body" bg-white rounded-20rpx pb-200rpx>
      <div class="top-view" :style="{ background: gradientBackground }" rounded-20rpx py-40rpx text-white flex flex-col
        items-center relative>
        <div text-30rpx mb-20rpx>{{ coupon.title }}</div>
        

        <div v-if="coupon.couponType !== 'DISCOUNT'">
          <div text-38rpx font-semibold>{{ unitPrice(coupon.price, '￥') }}</div>
        </div>
        <div v-if="coupon.couponType === 'DISCOUNT'">
          <div text-38rpx font-semibold>{{ coupon.couponDiscount || coupon.discount || 0 }} <span text-24rpx font-bold>折</span></div>
          
        </div>

        <div text-24rpx mt-20rpx>满{{ coupon.consumeThreshold }}元可用</div>
        <div class="bg">券</div>
        <div class="corner" :class="{ 'used-color': coupon.used_status != 0 }"><span class="text-1">{{
        coupon.used_status ==
          0 ? '新到' : coupon.used_status_text }}</span></div>
      </div>
      <div class="bottom-view" p-36rpx leading-46rpx text-26rpx text-neutral-500>
        <div>
          • 使用平台：{{ coupon.scopeType === "ALL" && coupon.storeId === "0" ? "全平台" : (coupon.scopeType ===
        "PORTION_GOODS_CATEGORY" ?
        (!!coupon.scopeName ? "仅限" + coupon.scopeName.substring(coupon.scopeName.lastIndexOf(",") + 1,
          coupon.scopeName.length) + "部分商品" : "仅限品类")
        : (coupon.storeName === "platform" ? "全平台" : coupon.storeName + "")) }}使 用
        </div>
        <div>• 说明：{{ coupon.description }}</div>
        <div>• 有效期至：{{ coupon.endTime }}</div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import { colors } from '@/constants/injection-key';
import { unitPrice } from '@/utils/filters';
import { onLoad } from '@dcloudio/uni-app';

const coupon = ref<any>('');
const gradientBackground = `linear-gradient(316deg, ${colors.themeColor} 2%,  ${colors.disabledLightColor} 98%);`
onLoad((options: any) => {
  coupon.value = JSON.parse(decodeURIComponent(options.item));
})

</script>

<style scoped lang="scss">
.bg {
  width: 150rpx;
  height: 150rpx;
  line-height: 150rpx;
  border: 6rpx solid #ffffff;
  border-radius: 50%;
  opacity: 0.3;
  color: #ffffff;
  text-align: center;
  font-size: 80rpx;
  position: absolute;
  right: -20rpx;
  bottom: -20rpx;
}
</style>
